<template>
  <div class="mike-promotion-collection">
    <el-card
      class="aui-card--fill"
      shadow="never">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item>
          <sn8-select @change="sn8Changed"/>
          <!--            <el-select-->
          <!--                @change="getDataList()"-->
          <!--                clearable-->
          <!--                filterable-->
          <!--                placeholder="型号SN8"-->
          <!--                v-model="dataForm.sn8"-->
          <!--            >-->
          <!--              <el-option-->
          <!--                  :key="item.value"-->
          <!--                  :label="item.label"-->
          <!--                  :value="item.value"-->
          <!--                  v-for="item in sn8List"-->
          <!--              >-->
          <!--              </el-option>-->
          <!--            </el-select>-->
        </el-form-item>
        <el-form-item>
          <el-input
            clearable
            placeholder="合集名称"
            v-model="dataForm.name">
            <!--                          v-if="$hasPermission('sys:user:save')"
  -->
            <el-button
              @click="getDataList()"
              slot="append">
              <i class="el-icon-search"/>
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item/>
        <el-form-item>
          <el-button
            @click="clickOnAddOrUpdate()"
            type="primary"
          >
            <i class="el-icon-plus"/>
          </el-button>
        </el-form-item>
      </el-form>

      <div class="mod-sys__user">
        <el-table
          :data="dataList"
          border
          style="width: 100%;"
          v-loading="dataListLoading"
        >
          <!--          <el-table-column-->
          <!--            align="center"-->
          <!--            header-align="center"-->
          <!--            type="selection"-->
          <!--            width="40"-->
          <!--          ></el-table-column>-->
          <el-table-column
            :label="$t('mike.detailImg')"
            align="center"
            header-align="center"
            width="100"
          >
            <template slot-scope="scope">
              <div
                class="text-center is-align-middle is-justify-center el-row--flex"
              >
                <midea-admin-image
                  :height="60"
                  :previewable="true"
                  :url="scope.row.url"
                  :width="60"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('mike.homeImg')"
            align="center"
            header-align="center"
            width="100"
          >
            <template slot-scope="scope">
              <div
                class="text-center is-align-middle is-justify-center el-row--flex"
              >
                <midea-admin-image
                  :height="60"
                  :previewable="true"
                  :url="scope.row.smallUrl"
                  :width="60"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('model.name')"
            align="center"
            header-align="center"
            prop="collectionName"
          />

          <el-table-column
            :label="$t('mike.sn8')"
            align="center"
            header-align="center"
            prop="sn8"
          />
          <el-table-column
            :label="$t('menu.sort')"
            align="center"
            header-align="center"
            prop="sort"
            sortable="custom"
          >
            <template slot-scope="scope">
              <div
                @click="clickOnEditSort(scope.row)"
                class="collection-sort common-table-sort-edit"
              >
                <span>{{ scope.row.sort }}</span>
                <i class="el-icon-edit-outline"/>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('mike.put_pull')"
            align="center"
            fixed="right"
            header-align="center"
          >
            <template slot-scope="scope" >
              <el-radio-group
                v-model="scope.row.online"
                @change="collectionOnlineChanged(scope.row)"
                v-loading.fullscreen="scope.row.requesting"
                size="small"
              >
                <el-radio :label="true">{{ $t("mike.put_on") }}</el-radio>
                <el-radio :label="false">{{ $t("mike.pull_off") }}</el-radio>
              </el-radio-group>

              <!--              <el-switch-->
              <!--                @change="collectionOnlineChanged(scope.row)"-->
              <!--                v-model="scope.row.online"-->
              <!--              >-->
              <!--              </el-switch>-->
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('handle')"
            align="center"
            fixed="right"
            header-align="center"
            width="160"
          >
            <template slot-scope="scope">
              <el-button
                @click="clickOnAddOrUpdate(scope.row.id)"
                size="small"
                type="primary"
                plain
              >
                {{ $t("update") }}
              </el-button>
              <el-button
                @click="deleteHandle(scope.row.id)"
                size="small"
                plain
                type="danger"
              >{{ $t("delete") }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page"
          :page-size="limit"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          @current-change="pageCurrentChangeHandle"
          @size-change="pageSizeChangeHandle"
          layout="total, sizes, prev, pager, next, jumper"
        />
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update
          @refreshDataList="getDataList"
          ref="addOrUpdate"
          v-if="addOrUpdateVisible"
        />

        <!-- 排序编辑-->

        <sort-edit-dialog
          ref="sortEdit"
          @refreshDataList="getDataList"
          v-if="sortEditVisible"
        />
        <!--        <collection-sort-edit-->
        <!--          @refreshDataList="getDataList"-->
        <!--          ref="sortEdit"-->
        <!--          v-if="sortEditVisible"-->
        <!--        ></collection-sort-edit>-->
      </div>
    </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'
import AddOrUpdate from './collection-add-or-update'
import SortEditDialog from '../../../components/mike/sortEditDialog'
import Sn8Select from '@/components/sn8.select'

export default {
  name: 'MikePromotionCollection',
  mixins: [mixinViewModule],
  components: { Sn8Select, SortEditDialog, AddOrUpdate },
  data () {
    return {
      sortEditVisible: false,
      requesting: false,
      activatedIsNeed: true,
      mixinViewModuleOptions: {
        getDataListURL: '/midea/menu/collection/content/get/all',
        getDataListIsPage: true,
        deleteURL: '/midea/menu/collection/content/del/'
        // deleteIsBatch: true
        // exportURL: '/sys/user/export'
      },
      dataForm: {
        sn8: '',
        name: ''
      }
    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    sn8Changed (sn8) {
      this.dataForm.sn8 = sn8
      this.getDataList()
    },
    handleResponseListData (data) {
      data = data.map(item => {
        item.online = item.flag === 0
        item.requesting = false
        return item
      })

      return data
    },

    collectionOnlineChanged (model) {
      if (this.requesting) {
        return
      }
      this.requesting = true

      model.requesting = true
      let url = model.online
        ? `${this.mikeNetworkBase}/midea/menu/collection/content/up/${model.id}`
        : `${this.mikeNetworkBase}/midea/menu/collection/content/down/${model.id}`

      this.$http
        .post(url)
        .then(({ data: res }) => {
          // this.getDataList()
          if (res.code !== 200) {
            return this.$message.error(res.data)
          }

          this.$message.success(model.online ? '上架成功' : '下架成功')
        })
        .finally(() => {
          this.requesting = false

          model.requesting = false
        })
    },

    clickOnEditSort (model) {
      this.sortEditVisible = true
      this.$nextTick(() => {
        this.$refs.sortEdit.requestUrl = 'midea/menu/collection/content/sort/{id}/{sort}'
        this.$refs.sortEdit.form.name = model.collectionName
        this.$refs.sortEdit.form.id = model.id
        this.$refs.sortEdit.form.value = model.sort
        this.$refs.sortEdit.init()
      })
    },

    clickOnAddOrUpdate (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.form.id = id
        this.$refs.addOrUpdate.init()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mike-promotion-collection {
  margin-top: 15px;

  .collection-header {
    padding: 15px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
